<template>
    <div>
        <el-table :data="tableData" style="margin-top: 20px;" :header-cell-style="{background:'#F5F7FA',color:'#606266',textAlign: 'center'}" :cell-style="{textAlign: 'center' }" @selection-change="selectionChange">
            <el-table-column v-if="tableConfig.checkbox===true" type='selection' width="35"></el-table-column>
            <template v-for="item in this.tableConfig.thead">
                <!-- 带有回调的渲染 比如时间转换 -->
                <el-table-column v-if="item.type==='fun'" :key="item.prop" :label="item.lable" :prop="item.prop">
                    <template #default="scope">
                        <!-- 存在择调用 -->
                        <span>{{item.callback&&item.callback(scope.row)}}</span>
                    </template>
                </el-table-column>
                <!-- 更改字体颜色 -->
                <el-table-column v-else-if="item.type==='color'" :key="item.prop" :label="item.lable" :prop="item.prop">
                    <template #default="scope">
                        <span type="text" :style="scope.row[item.prop]=='监测中'?'color:#19EB68':scope.row[item.prop]=='已暂停'?'color:#FF9900':'color:#C5C8CE'">{{scope.row[item.prop]}}</span>
                    </template>
                </el-table-column>
                <!-- 可以点击 -->
                <el-table-column v-else-if="item.type==='href'" :key="item.prop" :label="item.lable" :prop="item.prop">
                    <template #default="scope">
                        <el-button type="text" @click.native.prevent="item.method(item.prop,scope.row)">{{scope.row[item.prop]}}</el-button>
                    </template>
                </el-table-column>
                <!-- 纯文本 -->
                <el-table-column v-else :key="item.prop" :label="item.lable" :prop="item.prop" :width="item.width">
                </el-table-column>
            </template>
            <el-table-column v-if="tableConfig.operates && tableConfig.operates.length>0" label="操作" :width="tableConfig.width">
                <template #default="scope">
                    <el-button v-for="(btn,index) in tableConfig.operates" :type="btn.type" :key="index" @click.native.prevent="btn.method(index,scope.row)">{{btn.label}}</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { defineComponent, toRefs, ref, reactive, watch, onMounted } from 'vue';
export default defineComponent({
    name: 'eTable',
    props: {
        tableConfig: {
            type: Object,
            default: () => {
                return {};
            }
        },
        tableData: {
            type: Object,
            default: () => {
                return [];
            }
        }
    },
    setup(props) {
        // 当 checkbox==true 复选框可以出发
        const selectionChange = row => {
            console.log('selectionChange');
            console.log(row);
        };
        console.log(props.tableConfig);
        console.log(props.tableData);
        return { selectionChange };
    }
});
</script>

<style lang="scss" scoped>
</style>